<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    show-close
    size="50%"
    class="drawer"
    :before-close="dialogBeforeClose"
  >
    <div class="container">
      <el-form ref="form" :model="formData" :rules="rules">
        <div class="" style="height: 100%">
          <div class="overflowX">
            <el-row :gutter="10" class="">
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="小区编号" prop="community_code">
                  <el-select
                    v-model="formData.community_code"
                    placeholder="请输入"
                    clearable
                    size="small"
                    :style="{ width: '100%' }"
                    @change="communityCode"
                  >
                    <el-option
                      v-for="item in communityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="设备名称" prop="community_code">
                  <el-select
                    v-model="formData.device_code"
                    placeholder="请输入"
                    clearable
                    size="small"
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="item in deviceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="维修单位名称" prop="unit">
                  <el-input
                    v-model="formData.unit"
                    size="small"
                    placeholder="请输入"
                    clearable
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="维修人名称" prop="contacts">
                  <el-input
                    v-model="formData.contacts"
                    size="small"
                    placeholder="请输入"
                    clearable
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="维修人联系方式" prop="contacts_tel">
                  <el-input
                    v-model="formData.contacts_tel"
                    size="small"
                    placeholder="请输入"
                    clearable
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item
                  label="最后一次维修时间"
                  prop="last_maintain_time"
                >
                  <el-date-picker
                    v-model="formData.last_maintain_time"
                    type="date"
                    placeholder="选择日期"
                    size="small"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="下次维护时间" prop="next_maintain_time">
                  <el-date-picker
                    v-model="formData.next_maintain_time"
                    type="date"
                    placeholder="选择日期"
                    size="small"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="备注" prop="">
                  <el-input
                    v-model="formData.remark"
                    type="textarea"
                    :rows="4"
                    size="small"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24" style="padding-right: 10px">
                <el-form-item label="设备图片">
                  <u-pload
                    ref="refPload"
                    :style="{ width: '100%' }"
                    :imges-all="formData.photo"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-row type="flex" justify="end" class="btn">
          <el-button size="small" @click="dialogBeforeClose">取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="postMaintain"
          >确定</el-button>
        </el-row>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import UPload from '../index/UPload.vue'
import {
  postMaintain,
  PUTMaintain,
  communityCode
} from '@/api/device/maintain'
export default {
  components: { UPload },
  data() {
    return {
      // 抽屉
      drawer: false,
      // 小区编号下拉框数据
      communityList: [],
      // 设备名称下拉数据
      deviceList: [],
      formData: {
        community_code: '',
        contacts: '',
        contacts_tel: '',
        device_code: '',
        last_maintain_time: null,
        next_maintain_time: null,
        remark: '',
        unit: ''
      },
      //   时间
      // 价格点击
      priceShow: true,
      rules: {
        community_code: [
          {
            required: true,
            message: '请选择小区编号',
            trigger: 'change'
          }
        ],
        device_code: [
          {
            required: true,
            message: '请输入设备名称',
            trigger: 'change'
          }
        ],
        unit: [
          {
            required: true,
            message: '请输入维修单位名称',
            trigger: 'blur'
          }
        ],
        contacts: [
          {
            required: true,
            message: '请输入维修人名称',
            trigger: 'blur'
          }
        ],
        contacts_tel: [
          {
            required: true,
            message: '请输入维修人联系方式',
            trigger: 'blur'
          }
        ],
        last_maintain_time: [
          {
            required: true,
            message: '请选择最后一次维修时间',
            trigger: 'change'
          }
        ],
        next_maintain_time: [
          {
            required: true,
            message: '请输入下次维护时间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改维修记录' : '新增维修记录'
    }
  },
  methods: {
    // 获取设备名称信息
    async communityCode() {
      const res = await communityCode({
        community_code: this.formData.community_code
      })
      this.deviceList = res.data.data
    },
    // 确定
    // 处理图片上传
    async postMaintain() {
      // 判断上传的图片是否上传成功
      if (this.$refs.refPload.showPercent) {
        return this.$message.warning('您当前还有图片没有上传完成！')
      }
      // 图片数组字符化
      this.formData.photo = this.$refs.refPload.fileList
        .map((item) =>
          item.response
            ? item.response.url.split('8881')[1]
            : item.url.split('8881')[1]
        )
        .toString()
      //   时间处理
      this.formData.last_maintain_time = +new Date(
        this.formData.last_maintain_time
      )
      this.formData.next_maintain_time = +new Date(
        this.formData.next_maintain_time
      )
      await this.$refs.form.validate()
      // 新增或编辑
      this.formData.id
        ? await PUTMaintain(this.formData)
        : await postMaintain(this.formData)
      this.$message.success('新增成功')
      // 关闭并清空数据
      this.dialogBeforeClose()
      // 刷新页面
      this.$parent.getMaintain()
    },

    // 清除数据
    dialogBeforeClose() {
      this.drawer = false
      this.$refs.form.resetFields()
      this.$refs.refPload.fileList = []
      this.deviceList = []
      this.formData = {
        community_code: '',
        contacts: '',
        contacts_tel: '',
        device_code: '',
        last_maintain_time: null,
        next_maintain_time: null,
        remark: '',
        unit: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  h3 {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.88);
    padding-right: 10px;
  }
}
::v-deep.drawer {
  .el-drawer__header {
    padding-bottom: 10px;
    margin: 0;
    font-size: 25px;
    border-bottom: 1px solid #f0f0f0;
  }
  // .el-drawer__title {
  //   padding-top: 58px;
  // }
  .el-drawer__body {
    flex: 1 1;
    min-width: 0;
    min-height: 0;
    /* overflow: auto; */
  }
}
.container {
  padding: 0 20px;
  height: 100%;
  .el-form {
    position: relative;
    height: 100%;
    padding-bottom: 80px;
    .overflowX {
      height: 100%;
      overflow-x: hidden;
      // overflow: scroll;
    }
  }
}
.btn {
  border-top: 1px solid #f0f0f0;
  padding: 20px 10px;
}
.el-form-item {
  margin-bottom: 10px;
}
::v-deep .el-input {
  .el-input__inner {
    text-align: left;
  }
  .el-upload--picture-card {
    width: 100px;
  }
}
</style>
